<!-- 新建一个表单，里面包含的字段有商品名称，价格，商品描述，商品图片，商品分类，商品状态 -->
<template>
  <div class="product" v-if="isLogin">
    <el-form label-width="80px">
      <el-form-item label="商品名称">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input type="number" v-model="form.price"></el-input>
      </el-form-item>

      <el-form-item label="商品描述">
        <el-input v-model="form.body"></el-input>
      </el-form-item>

      <el-form-item label="商品图片">
        <el-input v-model="form.picPaths"></el-input>
      </el-form-item>

      <el-form-item>
            <el-button type="primary" @click="addProduct">提交</el-button>
        </el-form-item>
    </el-form>
  </div>

  <div class="courses zCourses">
    <div class="course hover_boxShadow_defaut_shadow" v-for="item in products">
    
        <router-link :to="{name:'ProductDetail',query:{id:item.id} }">  
            
        <div class="iconPathBox">
        <img  :src="item.picPaths" lazy="loaded"></div>
        <div :title="item.title" class="name"> {{item.title}} </div>
        <div :title="item.title" class="body"> 简介：{{item.body}}</div>
        <div :title="item.price" class="body"> 价格：{{item.price}}</div>

        </router-link> 

      </div>


      </div>
</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue'
import { getList, add ,TableName} from '../utils/request'
import { useUserStore } from '../stores/user';
import { ElMessageBox } from 'element-plus';

const userStore = useUserStore();
const isLogin = ref(userStore.isAuthenticated)


const form = ref({
  title: '',
  price: 0,
  productbody: '',
  picPaths: '',
  userid:2,
  typeIndex:TableName.Products
})

const products = ref([])

onMounted(async () => {
  const res = await getList(TableName.Products)
  products.value = res
})

async function addProduct() {
  const res = await add(form.value)
  
}


</script>

<style scoped>

.courses {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
}

.courses .course {
    cursor: pointer;
    padding: 4px 10px 0;
    margin-bottom: 15px;
    width: 250px;
    height: 240px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #fff;
}

 .iconPathBox img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 220px;
    height: 135px;
    border-radius: 8px;
}

.hover_boxShadow_defaut_shadow {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .16);
    transition: box-shadow .2s linear;
}

.course .name,.course .body {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>